import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import type { Ref } from 'vue';

interface MenuItem {
  title: string,
  key: string,
  children?: Array<MenuItem>
}

interface ItemParams {
  index: string,
  indexPath: string[]
}

const menu: MenuItem[] = [
  {
    title: '故障管理',
    key: 'manage'
  },
  {
    title: '故障预测',
    key: 'forecast'
  },
  {
    title: '设备画像',
    key: 'portrayal'
  },
  {
    title: '统计分析',
    key: 'analyze'
  },
  {
    title: '规则管理',
    key: 'rules'
  },
  {
    title: '设置',
    key: 'settings'
  },
  {
    title: '拓扑',
    key: 'intelligent'
  }
];

function useMenu(): AnyObject {
  const router = useRouter();

  const menuConfig: Ref<MenuItem[]> = ref(menu);
  const active: Ref<string> = ref('manage');

  const onClickItem = (params: ItemParams) => {
    const { indexPath, index } = params;
    const path: string = indexPath.join('/');

    active.value = index;

    router.push({ path });
  };

  onMounted(() => {
    onClickItem({ index: 'manage', indexPath: ['manage'] });
  });

  return {
    menuConfig,
    active,
    onClickItem
  };
}

export default useMenu;
